{% extends 'base.html' %}
{% load staticfiles %}
{% block custom_css%}
<link rel="stylesheet" type="text/css" href="/static/css/normalize.css" />
<style type="text/css">
    .demo-chat {
        width: 60%;
        margin: 0 auto;
    }
    #color-lump li {
        width: 80px;
        text-align:center;
        font-size: 14px;
        margin-bottom: 6px;
        color: rgb(0,0,0,0.5)
    }
</style>
{% endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="htmleaf-content">
        <div class="demo-chat">
            <canvas id="canvas1"></canvas>
            <center>
                <h4 style="color: rgb(0,0,0,0.5);">7天内收入走势</h4>
            </center>
        </div>
    </div>
    <div class="htmleaf-content">
        <div style="float:left; margin-left: 100px; margin-top:10px;">
            <ul id="color-lump">
                <li style="background-color: rgba(220,220,220,0.5)"><span>标准间</span></li>
                <li style="background-color: rgba(151,187,205,0.5)"><span>大床房</span></li>
                <li style="background-color: rgba(180,220,180,0.5)"><span>商务双人间</span></li>
                <li style="background-color: rgba(80,220,180,0.5)"><span>豪华大床房</span></li>
            </ul>
        </div>
        <div class="demo-chat">
            <canvas id="canvas"></canvas>
            <center>
                <h4 style="color: rgb(0,0,0,0.5);">7天内收入详情</h4>
            </center>
        </div>
    </div>
</div>

<script src="/static/js/Chart.js"></script>
<script>
    $(function () {
        $.ajax({
            type: 'GET',
            url: '/recently',
            success: function (result) {
                if (result.status == 'ok') {
                    var lineChartData = {
                        labels: result.time,
                        datasets: [{
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: result.data
                        }]

                    }
                    var barChartData = {
                        labels: result.time,
                        datasets: [{
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,0.8)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(220,220,220,1)",
                                data: result.arr[0]
                            },
                            {
                                fillColor: "rgba(151,187,205,0.5)",
                                strokeColor: "rgba(151,187,205,0.8)",
                                highlightFill: "rgba(151,187,205,0.75)",
                                highlightStroke: "rgba(151,187,205,1)",
                                data: result.arr[1]
                            },
                            {
                                fillColor: "rgba(180,220,180,0.5)",
                                strokeColor: "rgba(220,220,220,0.8)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(220,220,220,1)",
                                data: result.arr[2]
                            },
                            {
                                fillColor: "rgba(80,220,180,0.5)",
                                strokeColor: "rgba(220,220,220,0.8)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(220,220,220,1)",
                                data: result.arr[3]
                            },
                        ]
                    }
                    var ctx = document.getElementById("canvas1").getContext("2d");
                    window.myLine = new Chart(ctx).Line(lineChartData, {
                        responsive: true
                    });
                    var ctx = document.getElementById("canvas").getContext("2d");
                    window.myBar = new Chart(ctx).Bar(barChartData, {
                        responsive: true
                    });
                }
            }
        })

    })
</script>
{% endblock %}